<template>
  <div class="password-reset">
    <div class="reset-container">
      <el-card class="reset-card">
        <template #header>
          <div class="card-header">
            <span>密码重置工具</span>
          </div>
        </template>

        <div class="reset-content">
          <div class="info-section">
            <el-alert
              title="密码重置说明"
              type="info"
              :closable="false"
              show-icon
            >
              <template #default>
                <p>如果您忘记了数据库中用户的密码，可以使用此工具重置密码。</p>
                <p>重置后的密码将会是明文形式，方便您登录测试。</p>
              </template>
            </el-alert>
          </div>

          <div class="reset-section">
            <h3>重置用户密码</h3>
            
            <el-form
              ref="resetFormRef"
              :model="resetForm"
              :rules="resetRules"
              label-width="120px"
              class="reset-form"
            >
              <el-form-item label="用户邮箱" prop="email">
                <el-input
                  v-model="resetForm.email"
                  placeholder="请输入要重置密码的用户邮箱"
                  clearable
                />
              </el-form-item>

              <el-form-item label="新密码" prop="newPassword">
                <el-input
                  v-model="resetForm.newPassword"
                  :type="showPassword ? 'text' : 'password'"
                  placeholder="请输入新密码"
                  show-password
                  clearable
                />
                <div class="password-hint">
                  建议使用简单易记的密码，如：123456789 或 password123
                </div>
              </el-form-item>

              <el-form-item label="确认密码" prop="confirmPassword">
                <el-input
                  v-model="resetForm.confirmPassword"
                  :type="showConfirmPassword ? 'text' : 'password'"
                  placeholder="请确认新密码"
                  show-password
                  clearable
                />
              </el-form-item>

              <el-form-item>
                <el-button
                  type="primary"
                  @click="handlePasswordReset"
                  :loading="resetLoading"
                  size="large"
                >
                  重置密码
                </el-button>
                <el-button @click="fillCommonPassword" size="large">
                  使用常用密码
                </el-button>
                <el-button @click="clearForm" size="large">
                  清空表单
                </el-button>
              </el-form-item>
            </el-form>
          </div>

          <el-divider />

          <div class="result-section">
            <h3>重置结果</h3>
            <div v-if="resetResult" class="result-display">
              <el-alert
                :title="resetResult.success ? '重置成功' : '重置失败'"
                :type="resetResult.success ? 'success' : 'error'"
                :description="resetResult.message"
                show-icon
                :closable="false"
              />
              <div v-if="resetResult.success" class="success-info">
                <p><strong>新密码：</strong>{{ resetForm.newPassword }}</p>
                <p><strong>用户邮箱：</strong>{{ resetForm.email }}</p>
                <p>现在您可以使用新密码登录了！</p>
              </div>
            </div>
          </div>

          <el-divider />

          <div class="common-passwords">
            <h3>常用测试密码</h3>
            <div class="password-list">
              <el-tag
                v-for="pwd in commonPasswords"
                :key="pwd"
                class="password-tag"
                @click="usePassword(pwd)"
                type="info"
              >
                {{ pwd }}
              </el-tag>
            </div>
            <p class="password-note">点击上方密码可快速填入表单</p>
          </div>

          <div class="action-buttons">
            <el-button type="success" @click="goToLogin">
              前往登录页面
            </el-button>
            <el-button type="info" @click="goToRegister">
              注册新用户
            </el-button>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'

// 路由
const router = useRouter()

// 表单引用
const resetFormRef = ref(null)

// 状态
const resetLoading = ref(false)
const showPassword = ref(false)
const showConfirmPassword = ref(false)
const resetResult = ref(null)

// 表单数据
const resetForm = reactive({
  email: '',
  newPassword: '',
  confirmPassword: ''
})

// 表单验证规则
const resetRules = reactive({
  email: [
    { required: true, message: '请输入用户邮箱', trigger: 'blur' },
    { pattern: /^[1-9]\d{4,10}@qq\.com$/, message: '请输入正确的QQ邮箱格式', trigger: 'blur' }
  ],
  newPassword: [
    { required: true, message: '请输入新密码', trigger: 'blur' },
    { min: 6, message: '密码长度至少为6位', trigger: 'blur' }
  ],
  confirmPassword: [
    { required: true, message: '请确认新密码', trigger: 'blur' },
    {
      validator: (rule, value, callback) => {
        if (value !== resetForm.newPassword) {
          callback(new Error('两次输入的密码不一致'))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }
  ]
})

// 常用测试密码
const commonPasswords = [
  '123456789',
  'password123',
  'test123456',
  '007789abc',
  'admin123',
  'user123456'
]

// 方法
const fillCommonPassword = () => {
  resetForm.newPassword = '123456789'
  resetForm.confirmPassword = '123456789'
  ElMessage.success('已填入常用密码：123456789')
}

const usePassword = (password) => {
  resetForm.newPassword = password
  resetForm.confirmPassword = password
  ElMessage.success(`已使用密码：${password}`)
}

const clearForm = () => {
  Object.keys(resetForm).forEach(key => {
    resetForm[key] = ''
  })
  resetResult.value = null
  ElMessage.info('表单已清空')
}

const handlePasswordReset = async () => {
  if (!resetFormRef.value) return
  
  try {
    const valid = await resetFormRef.value.validate()
    if (!valid) {
      ElMessage.warning('请检查并完善重置信息')
      return
    }

    resetLoading.value = true
    resetResult.value = null

    // 模拟密码重置API调用
    console.log('重置密码请求:', {
      email: resetForm.email,
      newPassword: resetForm.newPassword
    })

    // 这里应该调用真实的密码重置API
    // const response = await resetPassword({
    //   email: resetForm.email,
    //   newPassword: resetForm.newPassword
    // })

    // 模拟API响应
    await new Promise(resolve => setTimeout(resolve, 1500))
    
    resetResult.value = {
      success: true,
      message: '密码重置成功！您现在可以使用新密码登录了。'
    }
    
    ElMessage.success('密码重置成功！')
    
  } catch (error) {
    console.error('密码重置错误:', error)
    
    resetResult.value = {
      success: false,
      message: error.message || '密码重置失败，请检查网络连接'
    }
    
    ElMessage.error('密码重置失败，请联系管理员')
  } finally {
    resetLoading.value = false
  }
}

const goToLogin = () => {
  router.push('/login')
}

const goToRegister = () => {
  router.push('/register')
}
</script>

<style scoped>
.password-reset {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 20px;
}

.reset-container {
  max-width: 700px;
  margin: 0 auto;
}

.reset-card {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-radius: 15px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
  font-size: 18px;
  color: #2c3e50;
}

.reset-content {
  padding: 20px 0;
}

.info-section {
  margin-bottom: 30px;
}

.reset-section {
  margin-bottom: 30px;
}

.reset-section h3 {
  margin-bottom: 15px;
  color: #409eff;
  font-size: 16px;
}

.reset-form {
  max-width: 500px;
}

.password-hint {
  font-size: 12px;
  color: #909399;
  margin-top: 5px;
}

.result-section h3 {
  margin-bottom: 15px;
  color: #409eff;
  font-size: 16px;
}

.result-display {
  margin-top: 15px;
}

.success-info {
  margin-top: 15px;
  padding: 15px;
  background: #f0f9ff;
  border-radius: 6px;
  border-left: 4px solid #409eff;
}

.success-info p {
  margin: 5px 0;
  color: #2c3e50;
}

.common-passwords h3 {
  margin-bottom: 15px;
  color: #409eff;
  font-size: 16px;
}

.password-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
}

.password-tag {
  cursor: pointer;
  transition: all 0.3s ease;
}

.password-tag:hover {
  background: #409eff;
  color: white;
}

.password-note {
  font-size: 12px;
  color: #909399;
  margin: 0;
}

.action-buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 20px;
}
</style>
